<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- <input type="button" value="toggle" @click="toggle" /> -->
      <!-- 如果click事件方法体里面只有一句话 不用单独定义一个方法  可以直接简写 这里不用写this 会自动去data中找对应属性-->
      <input type="button" value="toggle" @click="flag=!flag" />

      <!-- v-if 的特点：每次都会重新删除或创建元素 -->
      <!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，
            只是切换了元素的 display:none 样式 -->

      <!-- v-if 有较高的切换性能消耗 -->
      <!-- v-show 有较高的初始渲染消耗 -->

      <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
      <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
      <h3 v-if="flag" v-text="msg1"></h3>
      <h3 v-show="flag" v-text="msg2"></h3>
    </div>

    <script type="text/javascript">
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          flag: false,
          msg1: "这是用v-if控制的元素",
          msg2: "这是用v-show控制的元素"
        },
        methods: {
          /*toggle(){
                    this.flag = !this.flag;
                }*/
        }
      });
    </script>
  </body>
</html>
